<template>
	<form class="form-box" @change="formChange()">
	  <div class="create-case common-content-style">
	  	<h3>案例发布</h3>
	  	<p>
				<span><span>*</span>标题</span>
				<span :title="article.articleTitle" style="width: 620px"><input class="input" v-model="article.articleTitle" name="articleTitle" style="width: 424px;" required/></span>
			</p>
			<p>
				<span><span>*</span>发布位置</span>
				<select class="select" v-model="article.parentCategory" @change="changeParentCategory()">
					<option value="4">税保协同</option>
					<option value="5">股东分红</option>
					<option value="6">大额资产处置所得</option>
					<option value="7">税收优惠政策</option>
				</select>
				<select class="select" v-model="article.childCategory" v-if="categoryList.length">
					<option v-for="item in categoryList" :value="item.id">{{item.value}}</option>
				</select>
			</p>
			<div>
				<span><span>*</span>封面图片</span>
				<span class="Public-btn btn" @click="uploadImg()">上传</span>
				<img :src="article.articleCoverUrl" v-if="article.articleCoverUrl">
				<span class="Public-btn btn" @click="deleteImg()" v-if="article.articleCoverUrl">删除头图</span>
				<span :class="articleCoverUrl?'hide-input':'error'">请上传图片</span>
				<span class="suggest"><span>建议上传尺寸340px*340px</span></span>
				<input accept="image/*" class="transfer-img" id="xdaTanFileImg" @change="ObtainImg()">
			</div>
			<p>
				<span><span>*</span>文本</span>
				<span :class="articleContent?'hide-input':'error'">请输入正文</span>
			</p>
	   
	    <div class="editor-container">
	      <UE :defaultMsg=defaultMsg :config=config ref="ue"></UE>
	    </div>
	    <p class="btn">
	    	<input type="submit"  class="Public-btn" value="保存" @click="type('1')" v-if="currentType!='lookOver'">
	    	<input type="submit"  class="Public-btn" value="发布" @click="type('2')" v-if="currentType!='lookOver'">
	    	<input class="Public-btn" value="返回" @click="type('3')" v-if="currentType=='lookOver'">
	    </p> 
  	</div>
  </form>
</template>
<script>
	import UE from "../shareComponent/UE";
	export default {
    name:'create-case',
    data: function(){
      return{
        defaultMsg: "",
        config: {
          initialFrameWidth: null,
          initialFrameHeight: 350
        },
        /*显示数据*/
        article:{
        	type:"12",
        	/*标题*/
        	articleTitle:"",
        	/*二级属性(政策内容/性质)*/
        	parentCategory:"4",
        	/*底层属性(个税等)*/
        	childCategory:"",
        	/*头图*/
        	articleCoverUrl:"",
        	/*正文*/
        	articleContent:"",
        },
        /*级联下拉列表*/
        categoryList:[],
        /*当前页面是新增，修改，查看页面*/
      	currentType:"",
      	/*当前点击是发布还是保存*/
        status:"",
        /*图片是否上传*/
        articleCoverUrl:"true",
        /*富文本是否有值*/
        articleContent:"true",
        /*是否回显数据级联数据*/
        showCategory:false
      }
    },
    components:{UE},
    mounted:function() {
    	$("#xdaTanFileImg").attr("type","file");
	  	var  _this= this;
      $.validator.setDefaults({
        submitHandler: function() {
        	/**校验成功后通常调接口**/
        	_this.submitBtn();
        }
      });
			/**校验规则**/
      this.validator = $(".form-box").validate({
        rules:{
          articleTitle:{
            required:true,
            maxlength: 100
          },
        },
        messages:{
          articleTitle:{
            required:"请输入标题"
          },
        }
      });
      /*当前页面是新增，修改，查看页面*/
      this.currentType=this.$route.query.currentType;
      /*获取回显数据*/
     	if(this.$route.query.currentType=="modify"||this.$route.query.currentType=="lookOver"){
     		this.showCategory=true;
     		this.queryAllData();
     	}else{
     		/*获取级联列表*/
    		this.changeParentCategory();
     	}
    },
    methods:{
    	/*获取回显数据*/
    	queryAllData:function(){
    		this.$post(
          '/article/queryArticle',
          {
	          id:this.$route.query.id,
          }
        )
    		.then(response => {
    			/*未登录重定向*/
          if(response==444){
          	this.$router.push({path: '/login'});
          }else{
          	if (response.resultCode ==0) {
          		var allArticle = response.resultData.articleList[0];
	            this.article={
			        	type:"12",
			        	/*标题*/
			        	articleTitle:allArticle.title,
			        	/*二级属性(政策内容/性质)*/
			        	parentCategory:allArticle.parentCategory,
			        	/*底层属性(个税等)*/
			        	childCategory:allArticle.childCategory,
			        	/*头图*/
			        	articleCoverUrl:allArticle.coverUrl,
			        	/*正文*/
			        	articleContent:allArticle.content,
			        	id:allArticle.id
			        }
	            this.defaultMsg=allArticle.content;
	            /*获取级联列表*/
    					this.changeParentCategory();
	          }else{
	          	layer.alert(response.resultMsg);
	          }
          }
         
        }).catch(err => {
          console.log(err);
        })
    	},
    	type:function(type){
    		if(type==3) {
          this.$router.push({path: '/main/casePublishing'});
        }
    		this.status=type;
    	},
    	/*表单是否被改变*/
    	formChange:function(){
    		this.articleChange=true;
    	},
    	/*获取发布位置级联下拉框*/
    	changeParentCategory:function(){
    		this.$get('/system/queryDataByParentId/'+this.article.parentCategory)
    		.then(response => {
    			/*未登录重定向*/
          if(response==444){
          	this.$router.push({path: '/login'});
          }else{
          	if (response.resultCode ==0) {
	            this.categoryList=response.resultData;
	            if(!this.showCategory){
	            	this.article.childCategory=this.categoryList.length?response.resultData[0].id:"";
	            }else{
	            	this.showCategory=false;
	            }
	            
	          }else{
	          	layer.alert(response.resultMsg);
	          }
          }
         
        }).catch(err => {
          console.log(err);
        });
    	},
    	/*代码触发图片上传事件*/
      uploadImg:function(){
      	$("#xdaTanFileImg").attr("type","file");
      	$(".transfer-img").click();
      },
      /*获取图片*/
      ObtainImg:function(){
     		var picFile = document.getElementById("xdaTanFileImg");
     		var formdata1=new FormData();// 创建form对象
				formdata1.append('file',picFile.files[0]);
				let config = {
				  headers:{'Content-Type':'multipart/form-data'}
				}; 
      	this.$post('/system/uploadFile',formdata1,config)
    		.then(response => {
    			/*未登录重定向*/
          if(response==444){
          	this.$router.push({path: '/login'});
          }else{
          	if (response.resultCode ==0) {
	          	this.article.articleCoverUrl=this.prefixUrl+response.resultData;
	          	$("#xdaTanFileImg").attr("type","text");
	          }else{
	          	layer.alert(response.resultMsg);
	          }
          }
         
        }).catch(err => {
          console.log(err);
        })
      	
      },
       /*保存或者发布文件*/
      submitBtn:function(){
      	this.articleCoverUrl=this.article.articleCoverUrl;
      	this.article.articleContent=this.$refs.ue.getUEContent();
      	this.articleContent=this.article.articleContent;
      	this.article.status=this.status;
      	if(!this.articleCoverUrl||!this.articleContent){
      		return;
      	}
      	if(this.currentType=="add"){
        	this.addArticle();
        }else{
        	this.updateArticle();
        }
      },
      addArticle:function(){
      	this.$post('/article/addArticle',this.article)
    		.then(response => {
    			/*未登录重定向*/
          if(response==444){
          	this.$router.push({path: '/login'});
          }else{
          	if (response.resultCode ==0) {
          		this.$router.push({path: '/main/casePublishing'});
	          }else{
	          	layer.alert(response.resultMsg);
	          }
          }
         
        }).catch(err => {
          console.log(err);
        })
      },
      updateArticle:function(){
      	this.$post('/article/updateArticle',this.article)
    		.then(response => {
    			/*未登录重定向*/
          if(response==444){
          	this.$router.push({path: '/login'});
          }else{
          	if (response.resultCode ==0) {
          		this.$router.push({path: '/main/casePublishing'});
	          }else{
	          	layer.alert(response.resultMsg);
	          }
          }
         
        }).catch(err => {
          console.log(err);
        })
      },
      /*删除头图*/
      deleteImg:function(){
      	this.article.articleCoverUrl="";
      	this.formChange();
      },
    }
	}
</script>
<style lang="less" scoped>
	.create-case{
		>p,div{
			> img{
				width: 150px;
				height: 150px;
			}
			>span{
				width: 80px;
			}
			>span.btn{
				line-height: 36px;
				text-align: center;
			}
			.input,.select{
				width: 200px;
				margin-right: 20px;
			}
		}
		>p.btn{
			>input{
				width: 70px;
				text-align: center;
			}
		}
	}
</style>
